<template>
  <div class="left-view">
    <je-panel v-bind="leftViewData.panelOptions">
      <template #top>
        <je-table
          ref="xTable"
          border
          class="left-view-table"
          size="mini"
          show-overflow
          show-header-overflow
          :data="eventTableData"
          :field-config="['func']"
          height="100%"
          :edit-config="{
            trigger: 'click',
            mode: 'cell',
            showUpdateStatus: true,
            showStatus: false,
          }"
          :row-config="{ isCurrent: true, isHover: true, keyField: 'code' }"
          header-align="center"
          :cell-class-name="cellClassName"
          :row-class-name="rowClassName"
          @cell-click="cellCilck"
        >
          <je-column field="code" title="监听事件">
            <template #header>
              <div>
                <i
                  class="fas fa-question-circle"
                  style="color: #c0c4cc"
                  :style="changeColor(leftViewData.unitTipShow)"
                  @click="clickIcon"
                  @mouseenter="leftViewData.unitTipShow = true"
                  @mouseleave="leftViewData.unitTipShow = false"
                />
                监听事件
              </div>
            </template>
            <template #default="{ row }"> {{ row.name }}（{{ row.code }}） </template>
          </je-column>
          <je-column field="fire" title="注册" width="50" align="center">
            <template #default="{ row }">
              <i
                :style="`color: ${row.fire == '1' ? '#F4CE4A' : '#8D98AB'}`"
                class="fas fa-bolt"
                @click="clickFire(row)"
              >
              </i>
            </template>
          </je-column>
          <je-column width="40" align="center">
            <template #header>
              <i
                style="font-size: 16px; cursor: pointer"
                class="fal fa-plus"
                @click="addColumn"
              ></i>
            </template>
            <template #default="{ row }">
              <i
                style="font-size: 16px; cursor: pointer"
                class="fal fa-times"
                @click="deleteColumn(row)"
              ></i>
            </template>
          </je-column>
        </je-table>
      </template>
      <template #default>
        <div style="padding: 0">
          <div
            v-for="item in leftViewData.tableData"
            :key="item.code"
            class="left-view-default-table"
          >
            <div class="left-content">{{ item.name }}</div>
            <div class="right-content">{{ item.code }}</div>
          </div>
        </div>
      </template>
      <template #tbar>
        <div class="left-view-tabr">
          <!-- <p class="title">功能编码</p> -->
          <div
            class="left-view-bbar"
            :style="`border-top: ${leftViewData.panelOptions.top.hidden ? 1 : 0}px solid #e6e6e6`"
          >
            <je-dropdown :trigger="['click']" placement="bottomLeft">
              <div
                class="ant-dropdown-link"
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  padding: 0 12px;
                  cursor: pointer;
                  border-right: 1px solid #e6e6e6;
                  border-left: 1px solid #e6e6e6;
                "
              >
                <div>{{ leftViewData.selectObj.label }}</div>
                <i class="fal fa-angle-down"></i>
              </div>
              <template #overlay>
                <je-menu style="min-width: 300px; max-width: 500px">
                  <je-menu-item
                    v-for="menuData in leftViewData.selectOptions"
                    :key="menuData.value"
                  >
                    <a @click="changeProduct(menuData)">{{ menuData.label }}</a>
                  </je-menu-item>
                </je-menu>
              </template>
            </je-dropdown>
          </div>
          <p>{{ leftViewData.selectObj.code }}</p>

          <!-- <p class="title title1">字段信息</p> -->
        </div>
      </template>
    </je-panel>
    <ModalAdd v-if="modalType" @changeData="changeData" />
  </div>
</template>

<script>
  import { defineComponent, reactive, onMounted, ref, h } from 'vue';
  import { Modal, Panel, Grid, Menu, Dropdown, EditorCode } from '@jecloud/ui';
  import { getData, GetParentAndChildrenData } from '@/api/index';
  import ModalAdd from './modal/add.vue';
  // import { JS_ACTION_UNITPLE } from '@/helper/tip-constant.jsx';

  export default defineComponent({
    name: 'LeftView',
    components: {
      JePanel: Panel,
      JeTable: Grid,
      JeColumn: Grid.Column,
      JeDropdown: Dropdown,
      JeMenu: Menu,
      JeMenuItem: Menu.Item,
      ModalAdd,
    },
    props: {
      recordData: {
        type: Object,
        default: () => {
          return {};
        },
      },
      eventTableData: {
        type: Array,
      },
      commonData: {
        type: Array,
      },
    },
    emits: ['getSelectedColumn'],
    setup(props, { emit, expose }) {
      const xTable = ref(null);
      const modalType = ref(false);
      const leftViewData = reactive({
        panelOptions: {
          top: { size: 352, hidden: props.recordData.eventType == 'default' },
          bbar: { size: 40 },
          tbar: { size: 80 },
          default: { class: 'leftview-default' },
        },
        eventData: [],
        selectValue: props.recordData.id,
        selectOptions: [
          // {
          //   label: props.recordData.text,
          //   value: props.recordData.id,
          //   code: props.recordData.code,
          // },
        ],
        selectObj: {},
        tableData: [],
        unitTipShow: false,
      });
      onMounted(() => {
        getSelectionOption();
      });
      //获得子功能信息
      const getSelectionOption = () => {
        GetParentAndChildrenData({
          funcId: props.recordData.id,
        })
          .then((data) => {
            if (data.current && data.current.values) {
              leftViewData.selectObj = {
                label: data.current.values.FUNCINFO_FUNCNAME,
                value: data.current.values.JE_CORE_FUNCINFO_ID,
                code: data.current.values.FUNCINFO_FUNCCODE,
              };
              getTableData();
              leftViewData.selectOptions.push({
                label: data.current.values.FUNCINFO_FUNCNAME,
                value: data.current.values.JE_CORE_FUNCINFO_ID,
                code: data.current.values.FUNCINFO_FUNCCODE,
              });
            }
            if (data.childs && data.childs.length) {
              data.childs.forEach((item) => {
                leftViewData.selectOptions.push({
                  label: item.values.FUNCINFO_FUNCNAME + '（子功能）',
                  value: item.values.JE_CORE_FUNCINFO_ID,
                  code: item.values.FUNCINFO_FUNCCODE,
                });
              });
            }
            if (data.parent && data.parent.values) {
              leftViewData.selectOptions.push({
                label: data.parent.values.FUNCINFO_FUNCNAME + '（父功能）',
                value: data.parent.values.JE_CORE_FUNCINFO_ID,
                code: data.parent.values.FUNCINFO_FUNCCODE,
              });
            }
          })
          .catch((e) => {
            Modal.alert(e.message, 'error');
          });
      };
      //获得功能信息
      const getTableData = () => {
        const j_query = {
          custom: [
            {
              code: 'RESOURCECOLUMN_FUNCINFO_ID',
              value: leftViewData.selectObj.value,
              type: '=',
              cn: 'and',
            },
            {
              code: 'RESOURCECOLUMN_XTYPE',
              value: [
                // 'child',
                // 'fieldset',
                // 'displayfield',
                // 'childfuncfield',
                'rownumberer',
                'actioncolumn',
              ],
              type: 'notIn',
              cn: 'and',
            },
          ],
          order: [{ code: 'SY_ORDERINDEX', type: 'asc' }],
        };
        getData({
          tableCode: 'JE_CORE_RESOURCECOLUMN',
          limit: -1,
          funcId: leftViewData.selectObj.value,
          j_query: JSON.stringify(j_query),
        })
          .then((data) => {
            const tableData = [];
            data.forEach((item) => {
              tableData.push({ name: item.RESOURCECOLUMN_NAME, code: item.RESOURCECOLUMN_CODE });
            });
            leftViewData.tableData = tableData;
          })
          .catch((e) => {
            Modal.alert(e.message, 'error');
          });
      };
      //点击注册列图标
      const clickFire = (row) => {
        row.fire = row.fire == '1' ? '0' : '1';
      };
      //点击单元格
      const cellCilck = ({ row, column }) => {
        if (column && !column.field) {
          emit('getSelectedColumn', {});
          return false;
        }
        emit('getSelectedColumn', row);
      };
      //点击下拉菜单
      const changeProduct = (menuData) => {
        leftViewData.selectObj.value = menuData.value;
        leftViewData.selectObj.label = menuData.label;
        leftViewData.selectObj.code = menuData.code;
        getTableData();
      };
      const addColumn = () => {
        // if (props.recordData.eventType == 'All') {
        //   Modal.alert('请先选择功能事件下的字段！', 'info');
        //   return false;
        // }
        modalType.value = true;
      };

      const deleteColumn = (row) => {
        if (row.selfAdd) {
          Modal.confirm('确定删除选中的数据吗？', () => {
            xTable.value.remove(row);
          });
        } else {
          Modal.alert('系统默认事件不允许删除！', 'info');
          return false;
        }
      };

      const changeData = (data) => {
        modalType.value = false;
        if (data.type == 'save') {
          const rec = { name: data.name, code: data.code, func: '', fire: null, selfAdd: true };
          xTable.value.insert(rec, -1);
          cellCilck({ row: rec });
          xTable.value.setSelectRow(rec);
        }
        expose({ xTable });
      };
      const methods = {
        getRowStyle({ row }) {
          if (row.selfAdd) {
            return { background: '#faf9da' };
          }
        },
        cellClassName({ row, column }) {
          return [row.async == '1' && column.field == 'code' ? 'async-bg-color' : ''];
        },
        rowClassName({ row }) {
          return [row.selfAdd ? 'selfAdd-bg-class' : ''];
        },
        // 改变tip浮上去的颜色
        changeColor(flag) {
          if (flag) {
            return 'cursor:pointer;color: #3265F5';
          }
          return 'cursor:pointer;';
        },
        clickIcon() {
          const content = props.commonData.filter((item) => item.code == 'common-base') || [];
          if (JE.isEmpty(content)) {
            return false;
          }
          Modal.alert({
            content: h(EditorCode, {
              width: '100%',
              height: '100%',
              hideApi: true,
              readonly: true,
              value: content[0].func,
            }),
            title: '功能事件代码编写说明',
            icon: 'fal fa-info-circle',
            status: 'info',
            width: '1000px',
            height: '90%',
            class: 'js-listener-modal',
          });
        },
      };
      return {
        ...methods,
        xTable,
        leftViewData,
        getSelectionOption,
        clickFire,
        cellCilck,
        changeProduct,
        addColumn,
        deleteColumn,
        changeData,
        modalType,
      };
    },
  });
</script>
<style lang="less">
  .left-view {
    .leftview-default {
      &::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        background-color: transparent;
      }
    }
    .async-bg-color {
      .vxe-cell {
        color: #608b4e !important;
      }
    }
    .selfAdd-bg-class {
      background: #faf9da !important;
    }
    .selfAdd-bg-class.row--current {
      background: #d6e7ff !important;
    }
  }
</style>
<style lang="less" scoped>
  .left-view {
    border-bottom: 1px solid #e6e6e6;
    border-top: 0;
    height: 100%;
    .left-view-table {
      .tbar-title {
        height: 32px;
        height: 32px;
        background: #edf0f1;
        line-height: 32px;
        // padding: 0 15px;
      }
    }

    .left-view-tabr {
      // padding: 0 15px;
      p {
        margin: 0;
        line-height: 40px;
        padding-left: 12px;
        border-bottom: 1px solid #e6e6e6;
        border-right: 1px solid #e6e6e6;
        border-left: 1px solid #e6e6e6;
        &.title {
          color: #006ed7;
          font-size: 14px;
        }
      }
      // .title1 {
      //   border-bottom: 1px solid #e6e6e6;
      // }
    }
    // .left-view-default-table:first-child {
    //   border-top: 1px solid #e6e6e6;
    // }
    .left-view-default-table {
      display: flex;
      width: 100%;
      border-right: 1px solid #e6e6e6;
      border-left: 1px solid #e6e6e6;
      line-height: 32px;
      div {
        border-bottom: 1px solid #e6e6e6;
        // border-right: 1px solid #e6e6e6;
        padding: 0 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      div:nth-of-type(2n) {
        border-left: 1px solid #e6e6e6;
      }
      // div:nth-last-of-type(
      //   border-bottom: 0px solid #e6e6e6;
      // )
      .left-content {
        width: 35%;
      }
      .right-content {
        width: 65%;
      }
    }
    .left-view-bbar {
      height: 100%;
      line-height: 40px;
      text-align: left;
      border-bottom: 1px solid #e6e6e6;
    }
  }
</style>
<style lang="less">
  .js-listener-modal {
    .je-modal--content::-webkit-scrollbar {
      width: 0px !important;
      height: 4px;
    }
  }
</style>
